<template>
  <div class="app">
    <m-loading  v-show="axiosLoading"/>
    <router-view />
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeUnmount,
  onMounted,
  onRenderTracked,
  onRenderTriggered,
  reactive,
  toRefs,
  computed,
} from 'vue'
import { provideI18n } from './i18nPlugin'
import ch_language from './i18nPlugin/ch_language.js'
import es_language from './i18nPlugin/es_language.js'
import { MLoading } from '@/components'
import commonData from './data'

//缓存
import { useStore } from 'vuex'

export default defineComponent({
  name: 'App',
  components: {
    MLoading,
  },
  setup() {
    const store = useStore() // 使用useStore方法
    provideI18n({
      locale: 'en',
      messages: {
        en: ch_language,
        es: es_language,
      },
    })
    let axiosLoading = computed(() => {
      return store.state.axiosLoading
    })
    let data = reactive({
      num: 0,
      emojiList: commonData,
    })
    // console.log("setup等同于created", data);
    onMounted(() => {
      // console.log("挂载完->onMounted", data);
      // setTimeout(() => {
      //   data.num = 1;
      // }, 2000);
    })
    onBeforeUnmount(() => {
      // console.log("卸载前->onBeforeUnmount");
    })
    return {
      ...toRefs(data),
      onMounted,
      onBeforeUnmount,
      onRenderTracked,
      onRenderTriggered,
      axiosLoading,
    }
  },
})
</script>

<style>
.app {
  overflow: hidden;
  /* padding: 70px 0 50px 0; */
}
</style>
